<template>
  <!-- 生产样标签 -->
  <div class="top-form-wrapper card">
    <van-cell-group inset>
      <!-- <van-field name="radio" label="流程" label-align="right" :label-width="labelWidth">
        <template #input>
          <van-radio-group v-model="form.progress" direction="horizontal">
            <van-radio name="1">样品登记</van-radio>
            <van-radio name="2">直接录入结果</van-radio>
          </van-radio-group>
        </template>
</van-field> -->
      <van-field v-model="form.sampleName" label="样品名称" placeholder="请输入样品名称" label-align="right"
        :label-width="labelWidth" />
      <van-field v-model="form.sampleCode" label="样品编码" placeholder="请输入样品编码" label-align="right"
        :label-width="labelWidth" />
      <van-field :model-value="dateRangeText" readonly label="日期区间" placeholder="请选择日期区间" label-align="right"
        :label-width="labelWidth" @click="showDatePicker = true" />
      <van-field :model-value="form.typeName" readonly name="picker" label="物料类型" placeholder="点击选择物料类型"
        @click="showTypePicker = true" :disabled="loadingSampleType" label-align="right" :label-width="labelWidth">
        <template #right-icon>
          <van-loading v-if="loadingSampleType" size="20px" />
        </template>
      </van-field>
    </van-cell-group>
    <div class="btn-wrapper">
      <van-button type="primary" block @click="onSearch">查询</van-button>
    </div>
  </div>
  <div class="details-wrapper card">
    <!-- <p>分厂：熔炼厂</p> -->
    <ul class="info-plist">
      <li><label>样品名称：</label><span>{{ detailsList.sampleName }}</span></li>
      <li><label>样品编码：</label><span>{{ detailsList.sampleCode }}</span></li>
    </ul>
    <ul :class="hideDetails ? `info-plist hide` : `info-plist`">
      <li><label>车号：</label><span>{{ detailsList.carNo }}</span></li>
      <li><label>取样时间：</label><span>{{ detailsList.sampleDate }}</span></li>
      <li><label>样品状态：</label><span>{{ sampleStatusV2Text(detailsList.sampleStatus) }}</span></li>
      <li><label>物料类型：</label><span>{{ materialTypeV2Text(detailsList.materialType) }}</span></li>
      <li><label>供应商：</label><span>{{ detailsList.providerName }}</span></li>
      <li><label>合同号：</label><span>{{ detailsList.contractNo }}</span></li>
      <li><label>样品性质：</label><span>{{ detailsList.sampleProperty }}</span></li>
      <li><label>样品类型：</label><span>{{ sampleTypeV2Text(detailsList.sampleType) }}</span></li>
      <li><label>送样人：</label><span>{{ detailsList.sendName }}</span></li>
      <li><label>送样时间：</label><span>{{ detailsList.sendTime }}</span></li>
      <li><label>检验项目：</label><span>{{ detailsList.checkItems }}</span></li>
      <li><label>备注：</label><span>{{ detailsList.remarks }}</span></li>
    </ul>
    <div class="text-btn" @click="toggleShowDetails">{{ hideDetails ? `展开` : `收起` }}</div>
    <van-button type="primary" block @click="onPrint">打印条码</van-button>
  </div>
  <van-popup v-model:show="showTypePicker" position="bottom">
    <van-picker :columns="typeColumns" @confirm="onConfirmType" @cancel="showTypePicker = false" />
  </van-popup>
  <van-calendar v-model:show="showDatePicker" type="range" @confirm="onConfirmDateRange" />
</template>

<script setup lang="ts">
import { ref, unref, reactive, onMounted, computed } from 'vue';
import type { PickerColumn, PickerOption } from 'vant';
import api from '@/api/home';
import dayjs from 'dayjs';
import { fc } from 'flutter-core';
import { sampleStatusV2Text, sampleTypeV2Text, materialTypeV2Text } from '@/utils/dataTransfer';

const labelWidth = '4em';

interface SearchForm {
  progress: string,
  typeName: string | number | undefined,
  typeValue: string | number | undefined,
  sampleName: string | undefined,
  sampleCode: string | undefined,
  dateRange: Date[]
}

// ---------------- controller ----------------
const showTypePicker = ref<boolean>(false);
const loadingSampleType = ref<boolean>(false);
const showDatePicker = ref<boolean>(false);
const hideDetails = ref<boolean>(true);
const busy = ref<boolean>(false);

// ---------------- data ----------------
const typeColumns = ref<PickerColumn[] | PickerOption[]>([]);

//
const form = reactive<SearchForm>({
  progress: '1',
  typeName: undefined,
  typeValue: undefined,
  sampleName: undefined,
  sampleCode: undefined,
  dateRange: []
});

const detailsList = ref({
  "sampleName": "",
  "sampleCode": "",
  "carNo": '',
  "sampleDate": "",
  "sampleStatus": "",
  "materialType": "",
  "providerName": "",
  "contractNo": "",
  "sampleProperty": "",
  "sampleType": "",
  "sendName": "",
  "sendTime": "",
  "checkItems": "",
  "remarks": "",
  "barCode": "",
});

const dateRangeText = computed(() => {
  const startDateStr: string = form.dateRange[0] ? dayjs(form.dateRange[0]).format('YYYY-MM-DD') : '';
  const endDateStr: string = form.dateRange[1] ? dayjs(form.dateRange[1]).format('YYYY-MM-DD') : '';

  return !startDateStr ? '' : `${startDateStr} 至 ${endDateStr}`;
});

// 
const startDate = computed(() => {
  return form.dateRange[0] ? dayjs(form.dateRange[0]).format('YYYY-MM-DD') : '';
})
const endDate = computed(() => {
  return form.dateRange[1] ? dayjs(form.dateRange[1]).format('YYYY-MM-DD') : '';
})

// 确认选择样品类型后
const onConfirmType = ({ selectedOptions }: { selectedOptions: any[] }): void => {
  showTypePicker.value = false;
  form.typeName = selectedOptions[0]?.text;
  form.typeValue = selectedOptions[0]?.value;
};

// 确认选择了日期区间后
const onConfirmDateRange = (result: Date[]): void => {
  showDatePicker.value = false;
  form.dateRange = result;
};

onMounted(() => {
  // 装填选择器数据
  loadTypeOptions();
});

const loadTypeOptions = async (): Promise<void> => {
  loadingSampleType.value = true;
  api.getTypeData().then((res: any[]) => {
    typeColumns.value = res;
  }).catch((err) => {
    console.error(err)
  }).finally(() => {
    loadingSampleType.value = false;
  })
};

const onSearch = () => {
  const condition = { sampleName: form.sampleName, sampleCode: form.sampleCode, samplingDateStart: unref(startDate), samplingDateEnd: unref(endDate), materialType: form.typeValue };

  api.getOtherDetailByConditions(condition).then((res) => {
    detailsList.value = res;
  })
}

const onPrint = (): void => {
  const barCode: string = unref(detailsList).barCode;
  if (!!barCode) {
    fc.call('printCode', barCode);
  }
}

const toggleShowDetails = (): void => {
  if (unref(busy)) {
    return;
  } else {
    busy.value = true;
    hideDetails.value = !unref(hideDetails);
    setTimeout(() => {
      busy.value = false;
    }, 301)
  }
}

</script>

<style lang="scss" scoped>
.card {
  background-color: #fff;
  box-shadow: 2px 2px 10px 2px #ddd;
}

.top-form-wrapper {
  margin-bottom: 10px;

  .btn-wrapper {
    padding: 20px;
  }
}

.details-wrapper {
  padding: 20px;
  margin-bottom: 60px;
}

.details-wrapper {

  >p {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 0.5em;
  }

  >ul.info-plist {
    font-size: 14px;

    li {
      display: flex;
      align-items: center;
      margin-bottom: 0.5em;

      label {
        display: block;
        margin-right: 0.2em;
        width: 6em;
        text-align: right;
        white-space: nowrap;
      }

      span {
        max-width: calc(100% - 6.2em);
      }
    }
  }

  >ul.info-plist+ul.info-plist {
    transition: .3s;
    height: 20em;
    overflow: hidden;
  }

  >ul.info-plist+ul.info-plist.hide {
    height: 0;
  }

  .text-btn {
    padding: 1em;
    text-align: center;
    color: #1e90ff;
    background: linear-gradient(to bottom, transparent 0%, #fff 100%);
  }

}
</style>
